<template>
  <ContentTopWidget ref="refTop"
                    :recent-targets="recentPlatforms" :click-return="onReturnPlatformList"
                    :target-changed="onPlatformChanged" :target-label="'最近平台：'"
                    :target-holder="'请选择平台'" :target-name="'平台：'"
                    :tenant-changed="onTenantChanged" :recent-tenant="recentTenants" :tenant-holder="'请选择租户'">
    <template v-slot:extra>
      <div v-if="false"
           style="display: flex; flex-direction: row;align-items: center; background: #333840;margin-right: 2px;">
        <el-tooltip
            effect="dark"
            content="领域名称"
            placement="bottom">
          <div style="padding: 0 16px; min-width: 200px;">1231223</div>
        </el-tooltip>
        <el-link class="add-realm-lay" :underline="false" plain type="primary" round>
          <el-icon>
            <MoreFilled/>
          </el-icon>
        </el-link>
      </div>
    </template>
  </ContentTopWidget>
</template>

<script setup lang="ts">

import {effect, ref, toRaw} from "vue";
import {useStore} from "@/stores";
import ContentTopWidget from "@/widget/ContentTopWidget.vue";
import {MoreFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const store = useStore();
const router = useRouter();
const emits = defineEmits(['returnPlatformList', 'platformDetail']);

const refTop = ref();

defineProps<{
  recentPlatforms: any,
  recentTenants: any,
}>();

effect(() => {
  const pl: any = store.$state.platform;
  const tenant: any = store.$state.tenant;
  refTop.value?.updateCurrentTarget(pl);
  if (!tenant) {
    refTop.value?.updateCurrentTenant({
      id: '',
      label: '默认',
    });
  } else {
    refTop.value?.updateCurrentTenant(tenant);
  }
})

const onPlatformChanged = (pl: any) => {
  store.setCurrentPlatform(toRaw(pl));
}

const onTenantChanged = async (tenant: any) => {
  await router.push({
    path: '/platform/realm-info'
  })
  store.updateActiveMenu('platform', '/platform/realm-info');
  store.setCurrentTenant(toRaw(tenant));
}

const onReturnPlatformList = () => {
  emits('returnPlatformList');
}

</script>

<style scoped>
.add-realm-lay {
  padding: 0 8px 0;
  font-size: 12px;
  background: #333840;
  color: #C7C8CA;
  margin-right: 8px;
}

</style>
